.wrapper {
  padding: 0 40rpx;
  display: flex;
  flex-direction: column;
  .top {
    height: 320rpx;
    .tips {
      font-weight: 600;
      font-size: 32rpx;
      padding: 40rpx 0;
    }
    .input {
      width: 100%;
      border: 1rpx solid #eb183b;
      background: #df0027;
      color: #fff;
      padding: 14rpx 40rpx;
      border-radius: 40rpx;
      display: flex;
      align-items: center;
      font-weight: 600;
      span {
        margin-right: 20rpx;
      }
    }
    .voucher {
      margin: 40rpx 0 20rpx 0;
      font-weight: 600;
      font-size: 32rpx;
    }
  }

  .content {
    height: calc(100vh - 666rpx);
    overflow-y: scroll;
    .coupons {
      display: flex;
      flex-direction: column;
      padding: 30rpx;
      border: 3px solid #dbdbdb;
      border-radius: 20rpx;
      margin: 20rpx 0;
      .coupons-content {
        display: flex;
        // flex: 1;
        height: 120rpx;
        .left {
          width: 80rpx;
          .coupons-img {
            width: 60rpx;
            height: 40rpx;
          }
        }
        .right {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .coupons-money {
            font-weight: 600;
            display: flex;
            justify-content: space-between;
            span {
              color: #df0027;
              font-size: 32rpx;
            }
            .btn-coupon {
              color: #df0027;
              height: 70rpx;
              border: 1px solid #df0027;
              background: #fff;
            }
          }
          .tip {
            color: #0b314d;
            font-size: 26rpx;
            padding-bottom: 20rpx;
          }
          p {
            font-size: 24rpx;
          }
        }
      }
      .bottom {
        // height: 50rpx;
        flex: 1;
        margin-top: 20rpx;
        .canca {
          width: 160px;
          height: 160px;
          margin: 0 auto;
        }
        .canvas {
          width: 100%;
          height: 105px;
        }
        .line {
          width: 100%;
          height: 1rpx;
          background: rgb(218, 216, 216);
        }
        .rules {
          padding-top: 20rpx;
          color: #000;
          font-size: 28rpx;
        }
      }
    }
  }
  .money {
    height: 296rpx;
    position: fixed;
    display: flex;
    bottom: 40rpx;
    flex-direction: column;
    width: 100%;
    margin-left: -40rpx;
    .money-item {
      display: flex;
      width: 100%;
      justify-content: space-between;
      align-items: center;
      border: 2rpx solid rgb(221, 221, 221);
      padding: 20rpx 40rpx;
      .expenditure-amount {
        font-weight: 600;
        font-size: 32rpx;
      }
    }
    .preferential-amount {
      .total-money {
        font-weight: 600;
        font-size: 30rpx;
      }
      span {
        color: #df0027;
      }
    }
    .btn {
      display: flex;
      padding: 60rpx 0 46rpx 0;
      .btns {
        height: 100rpx;
        line-height: 100rpx;
        margin: 0 40rpx;
        border-radius: 100rpx;
        color: #fff;
        font-size: 30rpx;
        flex: 1;
      }
      .cancel {
        color: #868585;
        border: 1px solid #b3b3b3;
        background: #fff;
      }
    }
  }
}
